<template>
    <el-container style="width:1100px">
        <el-header>
            <el-card shadow="always">
                <div style="font-size:16px">编辑资料</div>
            </el-card>
        </el-header>
        <el-main>
            <el-card class="edit-card" shadow="always" style="height:600px;">
                <div class="logo">
                    <el-avatar :size="100">
                        <el-icon :size="100">
                            <UserFilled />
                        </el-icon>
                    </el-avatar>
                    <div style="font-size:14px;margin-top: 10px;">点击更换</div>
                </div>
                <div class="form">
                    <el-form label-width="250" inline>
                        <el-form-item label="用户名:" style="width:250px">
                            <el-input v-model="form.input"></el-input>
                        </el-form-item>
                        <el-form-item label="生日:" style="width:250px">
                            <el-date-picker v-model="form.value1" type="date" placeholder="日期选择器" />
                        </el-form-item>
                        <el-form-item label="性别:" style="width:250px">
                            <el-button color="deeppink">男</el-button>
                            <el-button color="#eee">女</el-button>
                        </el-form-item>
                        <el-form-item label="城市:" style="width:250px">
                            <el-select v-model="formInline.region" placeholder="请选择" style="width:150px">
                                <el-option label="上海" value="100001" />
                                <el-option label="北京" value="100002" />
                                <el-option label="武汉" value="100003" />
                                <el-option label="深圳" value="100004" />
                                <el-option label="杭州" value="100005" />
                                <el-option label="沈阳" value="100006" />
                                <el-option label="吉林" value="100007" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="成长等级:" style="width:250px">
                            <div>
                                <el-button color="deeppink" size="small">Lv.1</el-button>
                            </div>
                        </el-form-item>
                        <el-form-item label="技术水平:">
                            <el-select v-model="formInline.region" placeholder="零基础" style="width:150px">
                                <el-option label="零基础" value="1003001" />
                                <el-option label="业余初级0-1年学龄" value="1003002" />
                                <el-option label="业余中级1-2年学龄" value="1003003" />
                                <el-option label="业余高级2-4年学龄" value="1003004" />
                                <el-option label="专业初级4-6年学龄" value="1003005" />
                                <el-option label="专业中级6-8年学龄" value="1000306" />
                                <el-option label="专业高级8年以上学龄" value="1003007" />
                            </el-select>
                            &nbsp&nbsp
                            <el-icon :size="16">
                                <InfoFilled />
                            </el-icon>
                        </el-form-item>
                        <el-form-item label="兴趣技能:">
                            <el-button color="#eee">请选择</el-button>
                        </el-form-item>

                    </el-form>

                </div>

                <div class="button">
                    <el-button color="deeppink" style="width:150px;height:50px">保 存</el-button>
                </div>
            </el-card>
        </el-main>

    </el-container>
</template>

<script setup lang="ts">
import { UserFilled, InfoFilled } from "@element-plus/icons-vue"
import { ref } from "vue"
const form = ref({
    input: '1889670_ce1D',
    value1: ''
})
const formInline = ref({
    state: '',
    region: ''
})
</script>

<style scoped>
.edit-card {
    display: flex;
    justify-content: center;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
}

.form {
    margin-top: 30px;
    width: 600px
}

.button {
    display: flex;
    justify-content: center;
}
</style>
